<template>
  <div class="mt-5 mb-5 w-full bg-white border divide-y">
    <div class="w-full p-4 text-gray-500 text-lg">科研状态统计</div>
    <div class="w-full p-4 pr-20 flex justify-between">
      <n-statistic label="粉丝数">
        <template #prefix>
          <n-icon>
            <like-icon />
          </n-icon>
        </template>
        {{ data?.followerCount }}
      </n-statistic>
      <n-statistic label="被阅读数">
        <template #prefix>
          <n-icon>
            <reader-icon />
          </n-icon>
        </template>
        {{ data?.readerCount }}
      </n-statistic>
      <n-statistic>
        <template #label>
          本周成果影响力
          <n-popover trigger="hover">
            <template #trigger>
              <n-icon>
                <question-icon />
              </n-icon>
            </template>
            <span>研究成果被阅读+1分，研究成果被点赞+5分，每周更新</span>
          </n-popover>
        </template>
        <template #prefix>
          <n-icon>
            <effect-icon />
          </n-icon>
        </template>
        {{ data?.effect }}
      </n-statistic>
    </div>
  </div>
</template>

<script setup>
import api from '@/api/api'
import { BookReader as ReaderIcon } from '@vicons/fa'
import { Heart as LikeIcon } from '@vicons/ionicons5'
import {
  VideoBackgroundEffect24Filled as EffectIcon,
  QuestionCircle16Filled as QuestionIcon
} from '@vicons/fluent'

const data = ref(null)
const props = defineProps(['uid'])

onMounted(() => {
  init()
})

const init = () => {
  api.User.getStatistic({ id: props.uid }).then((res) => {
    data.value = res.data
  })
}
</script>

<style scoped></style>
